import React, { Component } from 'react';
import * as PropTypes from 'prop-types';
import { compose } from 'ramda';
import { createFragmentContainer } from 'react-relay';
import graphql from 'babel-plugin-relay/macro';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import Chip from '@material-ui/core/Chip';
import inject18n from '../../../../components/i18n';
import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';

const styles = () => ({
  paper: {
    height: '100%',
    minHeight: '100%',
    margin: '10px 0 0 0',
    padding: '15px',
    borderRadius: 6,
  },
  chip: {
    fontSize: 12,
    lineHeight: '12px',
    height: 25,
    marginTop: 4,
    textTransform: 'uppercase',
    borderRadius: '0',
  },
});

const inlineStyles = {
  white: {
    backgroundColor: '#ffffff',
    color: '#2b2b2b',
  },
  green: {
    backgroundColor: 'rgba(76, 175, 80, 0.08)',
    color: '#4caf50',
  },
  blue: {
    backgroundColor: 'rgba(92, 123, 245, 0.08)',
    color: '#5c7bf5',
  },
  red: {
    backgroundColor: 'rgba(244, 67, 54, 0.08)',
    color: '#f44336',
  },
  orange: {
    backgroundColor: 'rgba(255, 152, 0, 0.08)',
    color: '#ff9800',
  },
};

class VulnerabilityDetailsComponent extends Component {
  renderScore(score) {
    const { classes, t } = this.props;
    const finalScore = score || 99;
    if (finalScore <= 3) {
      return (
        <Chip
          classes={{ root: classes.chip }}
          style={inlineStyles.green}
          label={score}
        />
      );
    }
    if (finalScore <= 5) {
      return (
        <Chip
          classes={{ root: classes.chip }}
          style={inlineStyles.blue}
          label={score}
        />
      );
    }
    if (finalScore <= 7) {
      return (
        <Chip
          classes={{ root: classes.chip }}
          style={inlineStyles.orange}
          label={score}
        />
      );
    }
    if (finalScore <= 10) {
      return (
        <Chip
          classes={{ root: classes.chip }}
          style={inlineStyles.red}
          label={score}
        />
      );
    }
    return (
      <Chip
        classes={{ root: classes.chip }}
        style={inlineStyles.white}
        label={t('Unknown')}
      />
    );
  }

  renderSeverity(severity) {
    const { classes, t } = this.props;
    if (severity === 'LOW') {
      return (
        <Chip
          classes={{ root: classes.chip }}
          style={inlineStyles.green}
          label={severity}
        />
      );
    }
    if (severity === 'MEDIUM') {
      return (
        <Chip
          classes={{ root: classes.chip }}
          style={inlineStyles.orange}
          label={severity}
        />
      );
    }
    if (severity === 'HIGH') {
      return (
        <Chip
          classes={{ root: classes.chip }}
          style={inlineStyles.red}
          label={severity}
        />
      );
    }
    return (
      <Chip
        classes={{ root: classes.chip }}
        style={inlineStyles.white}
        label={t('Unknown')}
      />
    );
  }

  render() {
    const { t, classes, vulnerability } = this.props;
    return (
      <div style={{ height: '100%' }}>
        <Typography variant="h4" gutterBottom={true}>
          {t('Details')}
        </Typography>
        <Paper classes={{ root: classes.paper }} elevation={2}>
          <Typography variant="h3" gutterBottom={true}>
            {t('Description')}
          </Typography>
          <ExpandableMarkdown source={vulnerability.description} limit={400} />
          <Grid container={true} spacing={3}>
            <Grid item={true} xs={6}>
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 15 }}
              >
                {t('CVSS3 - Score')}
              </Typography>
              {this.renderScore(vulnerability.x_opencti_base_score)}
            </Grid>
            <Grid item={true} xs={6}>
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 15 }}
              >
                {t('CVSS3 - Severity')}
              </Typography>
              {this.renderSeverity(vulnerability.x_opencti_base_severity)}
            </Grid>
          </Grid>
          <Grid container={true} spacing={3}>
            <Grid item={true} xs={6}>
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 15 }}
              >
                {t('CVSS3 - Availability impact')}
              </Typography>
              <pre>
                {vulnerability.x_opencti_availability_impact || t('Unknown')}
              </pre>
            </Grid>
            <Grid item={true} xs={6}>
              <Typography
                variant="h3"
                gutterBottom={true}
                style={{ marginTop: 15 }}
              >
                {t('CVSS3 - Attack vector')}
              </Typography>
              <pre>{vulnerability.x_opencti_attack_vector || t('Unknown')}</pre>
            </Grid>
          </Grid>
        </Paper>
      </div>
    );
  }
}

VulnerabilityDetailsComponent.propTypes = {
  vulnerability: PropTypes.object,
  classes: PropTypes.object,
  t: PropTypes.func,
  fld: PropTypes.func,
};

const VulnerabilityDetails = createFragmentContainer(
  VulnerabilityDetailsComponent,
  {
    vulnerability: graphql`
      fragment VulnerabilityDetails_vulnerability on Vulnerability {
        id
        x_opencti_base_score
        x_opencti_base_severity
        x_opencti_attack_vector
        x_opencti_integrity_impact
        x_opencti_availability_impact
        description
      }
    `,
  },
);

export default compose(inject18n, withStyles(styles))(VulnerabilityDetails);
